
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.26 过度物质使用</title>
    <style>
        :root { --primary-color: #005A9C; --secondary-color: #6c757d; --success-color: #198754; --danger-color: #dc3545; --info-color: #0dcaf0;
            --light-bg: #f0f2f5; --border-color: #d9d9d9; --text-color: #333; --white-color: #ffffff;
        }
        body {
            font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif;
            background-color: var(--light-bg); color: var(--text-color); margin: 0; padding: 2rem;
            display: flex; justify-content: center;
        }
        .main-container {
            width: 100%; max-width: 900px; background-color: var(--white-color);
            border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        header {
             background-color: var(--primary-color); color: var(--white-color); padding: 1.5rem 2rem;
             border-top-left-radius: 8px; border-top-right-radius: 8px;
        }
        header h1 { font-size: 1.75rem; margin: 0; }
        .content-wrapper { padding: 2rem; }
        .history-container { margin-bottom: 2rem; }
        .history-container h2 {
            font-size: 1.1rem; color: var(--secondary-color); border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.5rem; margin-bottom: 1rem;
        }
        #history-log {
            list-style-type: none; padding-left: 0; margin: 0;
            font-size: 0.95rem; max-height: 300px; overflow-y: auto;
        }
        .log-item {
            display: flex; align-items: flex-start; margin-bottom: 1rem;
        }
        .step-number {
            font-weight: bold; color: var(--primary-color); background-color: #e6f7ff; border-radius: 50%;
            width: 24px; height: 24px; min-width: 24px;
            display: inline-flex; align-items: center; justify-content: center; margin-right: 12px;
        }
        .log-content { flex-grow: 1; }
        .question-text { color: #333; display: block; }
        .choice-section {
            margin-top: 0.5rem; display: flex; align-items: center; flex-wrap: wrap;
        }
        .choice-text {
            font-weight: bold; padding: 2px 8px; border-radius: 4px; color: white;
        }
        .choice-yes { background-color: var(--success-color); }
        .choice-no { background-color: var(--danger-color); }
        .remark-text {
            margin-left: 10px; padding: 4px 8px; background-color: #eee;
            border-radius: 4px; font-style: italic; color: #555;
            border-left: 3px solid var(--secondary-color);
        }
        .log-connector {
            width: 100%; text-align: center; color: var(--border-color);
            font-size: 1.5rem; line-height: 0.5; margin-bottom: 0.5rem;
        }
        .final-result-log {
            background-color: #e6f7ff; border: 1px solid #91d5ff; padding: 1rem;
            border-radius: 4px; font-weight: bold; color: var(--primary-color);
            margin-top: -1rem;
        }
        .flowchart-step fieldset {
            border: 2px solid var(--primary-color); border-radius: 6px; padding: 1.5rem; background-color: #f8f9fa;
        }
        .flowchart-step legend {
            font-weight: bold; padding: 0 0.5em; font-size: 1.1rem; color: var(--primary-color);
        }
        #node-display {
            font-size: 1.3rem; line-height: 1.6; min-height: 100px; display: flex;
            align-items: center; justify-content: center; text-align: center; margin-bottom: 1rem;
        }
        .remark-input-container { margin-bottom: 1.5rem; text-align: center; }
        #remark-input {
            width: 80%; padding: 8px 12px; border: 1px solid var(--border-color);
            border-radius: 4px; font-size: 0.95rem;
        }
        #remark-input:focus {
            outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 90, 156, 0.2);
        }
        .controls { display: flex; justify-content: space-between; }
        .controls button, .footer-controls button {
            font-size: 1rem; padding: 0.75rem 0; border-radius: 5px; border: 1px solid;
            cursor: pointer; transition: all 0.2s ease-in-out; font-weight: 500; width: 48%;
        }
        #yes-btn { background-color: var(--success-color); color: var(--white-color); border-color: var(--success-color); }
        #no-btn { background-color: var(--danger-color); color: var(--white-color); border-color: var(--danger-color);}
        #yes-btn:hover { background-color: #157347; border-color: #146c43; }
        #no-btn:hover { background-color: #bb2d3b; border-color: #b02a37; }
        .footer-controls {
            margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color);
            display: flex; justify-content: space-between; align-items: center;
        }
        .footer-controls .btn-group { display: flex; gap: 1rem; flex-wrap: wrap; }
        .footer-controls button { width: auto; padding: 0.5rem 1.2rem; }
        #back-btn, #restart-btn { background-color: var(--white-color); color: var(--secondary-color); border-color: var(--secondary-color); }
        #export-btn { background-color: var(--white-color); color: var(--info-color); border-color: var(--info-color); }
        #back-btn:hover, #restart-btn:hover { background-color: #e9ecef; }
        #export-btn:hover { background-color: #cff4fc; }
        #back-btn:disabled, #export-btn:disabled { background-color: #e9ecef; cursor: not-allowed; opacity: 0.7; border-color: var(--border-color); color: var(--secondary-color); }
        .footer-controls a { color: var(--primary-color); text-decoration: none; font-size: 0.9rem; }
    </style>
</head>
<body>
    <div class="main-container">
        <header><h1>2.26 过度物质使用</h1></header>
        <div class="content-wrapper">
            <div class="history-container">
                <h2>诊断路径</h2>
                <ul id="history-log"><li>开始诊断...</li></ul>
            </div>
            <div id="flowchart-container">
                <div class="flowchart-step">
                    <fieldset>
                        <legend>当前步骤</legend>
                        <div id="node-display"></div>
                        <div id="remark-container" class="remark-input-container">
                            <input type="text" id="remark-input" placeholder="添加备注 (可选)">
                        </div>
                        <div id="controls" class="controls">
                            <button id="no-btn">否 (No)</button>
                            <button id="yes-btn">是 (Yes)</button>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="footer-controls">
                <div class="btn-group">
                    <button id="back-btn">上一步</button>
                    <button id="restart-btn">重新开始</button>
                    <button id="export-btn">导出诊断报告</button>
                </div>
                <a href="index.html">返回主索引</a>
            </div>
        </div>
    </div>
    <script>
        const treeData = [{"id": "start", "type": "question", "text": "有问题的物质使用模式导致有临床意义的损害或痛苦(如, 摄入物质的量更大, 由于物质使用而放弃社交、职业或娱乐活动, 在对身体有害的情况下仍反复使用)", "yes_target": "q1_sub", "no_target": "q2"}, {"id": "q1_sub", "type": "question", "text": "存在由于物质对中枢神经系统(CNS)的直接效应所导致的精神症状", "yes_target": "result_substance_use_disorder_with_intoxication", "no_target": "result_substance_use_disorder"}, {"id": "result_substance_use_disorder_with_intoxication", "type": "result", "text": "诊断: 物质使用障碍(3.15.1)"}, {"id": "result_substance_use_disorder", "type": "result", "text": "诊断: 物质使用障碍(3.15.1)"}, {"id": "q2", "type": "question", "text": "存在由于物质对CNS的直接生理效应导致的临床意义的精神症状", "yes_target": "q2_sub", "no_target": "result_no_disorder"}, {"id": "result_no_disorder", "type": "result", "text": "诊断: 不是物质所致的障碍"}, {"id": "q2_sub", "type": "question", "text": "是注意和意识的紊乱, 以波动性病程为特征", "yes_target": "q2_sub_a", "no_target": "q3"}, {"id": "q2_sub_a", "type": "question", "text": "证据表明这种紊乱由药物使用所致(如物质和一般躯体疾病)", "yes_target": "result_substance_induced_delirium", "no_target": "q2_sub_a2"}, {"id": "result_substance_induced_delirium", "type": "result", "text": "诊断: 药物所致的谵妄 (3.16.1)"}, {"id": "q2_sub_a2", "type": "question", "text": "谵妄在物质戒断期间出现", "yes_target": "result_withdrawal_delirium", "no_target": "q2_sub_a3"}, {"id": "result_withdrawal_delirium", "type": "result", "text": "诊断: 物质戒断性谵妄 (3.16.1)"}, {"id": "q2_sub_a3", "type": "question", "text": "证据表明这种紊乱由于多种病因所致", "yes_target": "result_multiple_etiologies_delirium", "no_target": "result_intoxication_delirium"}, {"id": "result_multiple_etiologies_delirium", "type": "result", "text": "诊断: 由于多种病因所致的谵妄 (3.16.1)"}, {"id": "result_intoxication_delirium", "type": "result", "text": "诊断: 物质中毒性谵妄 (3.16.1)"}, {"id": "q3", "type": "question", "text": "有以下一个或更多认知领域下降的证据: 复杂注意、执行功能、学习和记忆、语言、知觉运动或社会认知", "yes_target": "q3_sub", "no_target": "q4"}, {"id": "q3_sub", "type": "question", "text": "证据表明这种紊乱由一种以上的病因(如物质和一般躯体疾病)", "yes_target": "result_multiple_etiologies_neurocognitive", "no_target": "result_substance_induced_neurocognitive"}, {"id": "result_multiple_etiologies_neurocognitive", "type": "result", "text": "诊断: 由于多种病因所致的重度或轻度神经认知障碍 (3.16.2)"}, {"id": "result_substance_induced_neurocognitive", "type": "result", "text": "诊断: 由于多种病因所致的重度或轻度神经认知障碍 (3.16.2)"}, {"id": "q4", "type": "question", "text": "再次经历致幻剂中毒期间所体验到的知觉症状", "yes_target": "result_hppd", "no_target": "q5"}, {"id": "result_hppd", "type": "result", "text": "诊断: 致幻剂持续性知觉障碍(闪回)"}, {"id": "q5", "type": "question", "text": "妄想或幻觉是主要临床表现并严重到需要临床关注", "yes_target": "result_substance_psychotic", "no_target": "q6"}, {"id": "result_substance_psychotic", "type": "result", "text": "诊断: 物质/药物所致的精神病性障碍(标注是否于中毒或戒断期间起病)"}, {"id": "q6", "type": "question", "text": "高涨、膨胀和/或易激惹的心境是主要临床表现并严重到需要临床关注", "yes_target": "result_substance_bipolar", "no_target": "q7"}, {"id": "result_substance_bipolar", "type": "result", "text": "诊断: 物质/药物所致的双相及相关障碍(标注是否于中毒或戒断期间起病)"}, {"id": "q7", "type": "question", "text": "抑郁心境和/或兴趣或愉悦感的兴趣减退是主要临床表现并严重到需要临床关注", "yes_target": "result_substance_depressive", "no_target": "q8"}, {"id": "result_substance_depressive", "type": "result", "text": "诊断: 物质/药物所致的抑郁障碍(标注是否于中毒或戒断期间起病)"}, {"id": "q8", "type": "question", "text": "焦虑、惊恐发作或惊恐是主要临床表现并严重到需要临床关注", "yes_target": "result_substance_anxiety", "no_target": "q9"}, {"id": "result_substance_anxiety", "type": "result", "text": "诊断: 物质/药物所致的焦虑障碍(标注是否于中毒或戒断期间,或药物使用后起病)"}, {"id": "q9", "type": "question", "text": "强迫思维、强迫行为、拔毛发、抓皮肤、其他躯体的重复行为的典型症状是主要临床表现并严重到需要临床关注", "yes_target": "result_substance_ocd", "no_target": "q10"}, {"id": "result_substance_ocd", "type": "result", "text": "诊断: 物质/药物所致的强迫及相关障碍(标注是否于中毒或戒断期间,或药物使用后起病)"}, {"id": "q10", "type": "question", "text": "有临床意义的性功能失调是主要临床表现并严重到需要临床关注", "yes_target": "result_substance_sexual", "no_target": "q11"}, {"id": "result_substance_sexual", "type": "result", "text": "诊断: 物质/药物所致的性功能失调(标注是否于中毒或戒断期间,或药物使用后起病)"}, {"id": "q11", "type": "question", "text": "突出且严重的失眠紊乱是主要临床表现并严重到需要临床关注", "yes_target": "result_substance_sleep", "no_target": "q12"}, {"id": "result_substance_sleep", "type": "result", "text": "诊断: 物质/药物所致的睡眠障碍(标注是否于中毒或摇药/戒断期间起病)"}, {"id": "q12", "type": "question", "text": "在物质使用期间出现的有临床意义的行为或心理改变", "yes_target": "result_substance_intoxication", "no_target": "q13"}, {"id": "result_substance_intoxication", "type": "result", "text": "诊断: 物质中毒"}, {"id": "q13", "type": "question", "text": "由于减少或中断物质使用所致的综合征", "yes_target": "result_substance_withdrawal", "no_target": "q14"}, {"id": "result_substance_withdrawal", "type": "result", "text": "诊断: 物质戒断"}, {"id": "q14", "type": "question", "text": "上述未涵盖的物质所致的有临床意义的症状", "yes_target": "result_other_substance", "no_target": "result_no_disorder_final"}, {"id": "result_other_substance", "type": "result", "text": "诊断: 未特定的物质相关障碍"}, {"id": "result_no_disorder_final", "type": "result", "text": "结论: 物质所致的障碍(症状无临床意义)"}];
        const pageTitle = "2.26 过度物质使用";
        const startNodeId = 'start';
        let currentNode;
        let history = [];
        const nodeDisplay = document.getElementById('node-display');
        const flowchartContainer = document.getElementById('flowchart-container');
        const controlsDiv = document.getElementById('controls');
        const remarkContainer = document.getElementById('remark-container');
        const remarkInput = document.getElementById('remark-input');
        const yesBtn = document.getElementById('yes-btn');
        const noBtn = document.getElementById('no-btn');
        const backBtn = document.getElementById('back-btn');
        const restartBtn = document.getElementById('restart-btn');
        const exportBtn = document.getElementById('export-btn');
        const historyLog = document.getElementById('history-log');
        function findNodeById(id) { return treeData.find(node => node.id === id); }
        function buildHistoryTree(path, finalNode) {
            if (path.length === 0 && !finalNode) { return '<li>开始诊断...</li>'; }
            let html = '';
            path.forEach((step, index) => {
                const node = findNodeById(step.nodeId);
                const choiceText = step.choice === 'yes' ? '是' : '否';
                const choiceClass = step.choice === 'yes' ? 'choice-yes' : 'choice-no';
                html += `<li class="log-item"><div class="step-number">${index + 1}</div><div class="log-content"><div class="question-text">"${node.text}"</div><div class="choice-section"><span class="choice-text ${choiceClass}">${choiceText}</span>`;
                if (step.remark) { html += `<div class="remark-text">${step.remark}</div>`; }
                html += `</div></div></li><div class="log-connector">↓</div>`;
            });
            if (finalNode && finalNode.type === 'result') { html += `<div class="final-result-log">${finalNode.text}</div>`; }
            return html;
        }
        function updateHistoryDisplay() {
            historyLog.innerHTML = buildHistoryTree(history, currentNode);
            historyLog.scrollTop = historyLog.scrollHeight;
        }
        function updateButtonStates() {
            backBtn.disabled = history.length === 0;
            exportBtn.disabled = history.length === 0 || !currentNode || currentNode.type !== 'result';
        }
        function showNode(nodeId) {
            currentNode = findNodeById(nodeId);
            if (!currentNode) {
                nodeDisplay.textContent = '错误：未找到节点 ' + nodeId;
                flowchartContainer.style.display = 'none';
                return;
            }
            updateHistoryDisplay();
            updateButtonStates();
            if (currentNode.type === 'question') {
                nodeDisplay.textContent = currentNode.text;
                flowchartContainer.style.display = 'block';
            } else {
                flowchartContainer.style.display = 'none';
            }
        }
        function makeChoice(isYes) {
            if (!currentNode) return;
            const choice = isYes ? 'yes' : 'no';
            const remark = remarkInput.value.trim();
            history.push({ nodeId: currentNode.id, choice: choice, remark: remark });
            remarkInput.value = '';
            const nextNodeId = isYes ? currentNode.yes_target : currentNode.no_target;
            showNode(nextNodeId);
        }
        function generateReportText() {
            let report = `DSM-5® 鉴别诊断报告\n====================================\n`;
            report += `决策树: ${pageTitle}\n生成时间: ${new Date().toLocaleString('zh-CN')}\n====================================\n\n`;
            history.forEach((step, index) => {
                const node = findNodeById(step.nodeId);
                const choiceText = step.choice === 'yes' ? '是' : '否';
                report += `步骤 ${index + 1}: \n  - 问题: ${node.text}\n  - 选择: ${choiceText}\n`;
                if (step.remark) { report += `  - 备注: ${step.remark}\n`; }
                report += `\n`;
            });
            if (currentNode && currentNode.type === 'result') { report += `最终诊断/结论:\n  - ${currentNode.text}\n`; }
            return report;
        }
        function exportReport() {
            if (exportBtn.disabled) return;
            const reportText = generateReportText();
            const blob = new Blob([reportText], { type: 'text/plain;charset=utf-8' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
            a.download = `DSM5_Report_${timestamp}.txt`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
        yesBtn.addEventListener('click', () => makeChoice(true));
        noBtn.addEventListener('click', () => makeChoice(false));
        exportBtn.addEventListener('click', exportReport);
        backBtn.addEventListener('click', () => {
            if (history.length > 0) {
                const lastStep = history.pop();
                showNode(lastStep.nodeId);
                remarkInput.value = lastStep.remark || '';
            }
        });
        restartBtn.addEventListener('click', () => {
            history = [];
            remarkInput.value = '';
            showNode(startNodeId);
        });
        showNode(startNodeId);
    </script>
</body>
</html>
